<!-- 子菜单 -->
<template>
  <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
    <span slot="title">
      <div>
        <a-icon v-if="menuInfo.slots.icon" :type="menuInfo.slots.icon" /><span
          >{{ menuInfo.title }}</span
        ><a-icon
          style="margin-left: 10px"
          v-if="!menuInfo.slots.extend.isShowMenu"
          type="eye-invisible"
        />
        <a-dropdown>
          <a-icon
            type="ellipsis"
            style="position: absolute; top: 12px; right: 22px"
          ></a-icon>
          <a-menu slot="overlay">
            <a-menu-item @click="worksheetAdd(menuInfo)">
              <a-icon type="table" />工作表
            </a-menu-item>
            <a-menu-item> <a-icon type="control" />自定义</a-menu-item>
            <a-menu-item @click="iframeAdd(menuInfo)">
              <a-icon type="pic-right" />嵌套页
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="edit(menuInfo)">
              <a-icon type="edit" />修改
            </a-menu-item>
            <a-menu-item @click="copy(menuInfo)">
              <a-icon type="copy" />复制</a-menu-item
            >
            <a-menu-item @click="show(menuInfo)">
              <a-icon
                :type="
                  menuInfo.slots.extend.isShowMenu ? 'eye-invisible' : 'eye'
                "
              />{{ menuInfo.slots.extend.isShowMenu ? "隐藏" : "显示" }}
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="del(item)">
              <div style="cursor: pointer; color: red">
                <a-icon type="delete" />
                删除
              </div>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item
        v-if="item.children.length == 0"
        :key="item.key"
        @click="menuClick(item)"
      >
        <div>
          <a-icon v-if="item.slots.icon" :type="item.slots.icon" /><span>{{
            item.title
          }}</span>
          <a-icon
            style="margin-left: 10px"
            v-if="!item.slots.extend.isShowMenu"
            type="eye-invisible"
          />
          <a-dropdown>
            <a-icon
              type="ellipsis"
              style="position: absolute; top: 12px; right: 6px"
            ></a-icon>

            <a-menu slot="overlay">
              <a-menu-item @click="edit(item)">
                <a-icon type="edit" />修改
              </a-menu-item>
              <a-menu-item @click="copy(item)">
                <a-icon type="copy" />复制</a-menu-item
              >
              <a-sub-menu key="test">
                <template slot="title"> <a-icon type="swap" />移动 </template>
                <a-menu-item>3rd menu item</a-menu-item>
                <a-menu-item>4th menu item</a-menu-item>
              </a-sub-menu>
              <a-menu-item @click="show(item)">
                <a-icon
                  :type="item.slots.extend.isShowMenu ? 'eye-invisible' : 'eye'"
                />{{ item.slots.extend.isShowMenu ? "隐藏" : "显示" }}
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item @click="del(item)">
                <div style="cursor: pointer; color: red">
                  <a-icon type="delete" />
                  删除
                </div>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-menu-item>
      <sub-menu v-else :key="item.key" :menu-info="item" />
    </template>
  </a-sub-menu>
</template>

<script>
import { Menu } from "ant-design-vue";
export default {
  name: "SubMenu",
  // 必须添加
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  methods: {
    /**
     *
     * @param {*} item
     */
    menuClick(item) {
      this.$emit("menuClick", item);
    },
    /**
     *添加工作表
     */
    worksheetAdd(item) {
      this.$emit("worksheetAdd", item);
    },
    /**
     *
     */
    iframeAdd(item) {
      this.$emit("iframeAdd", item);
    },
    /**
     *编辑
     */
    edit(item) {
      this.$emit("edit", item);
    },

    /**
     *复制
     */
    copy(item) {
      this.$emit("copy", item);
    },

    /**
     *删除
     */
    del(item) {
      this.$emit("del", item);
    },

    /**
     *显示
     */
    show(item) {
      this.$emit("show", item);
    },
  },
};
</script>

<style scoped>
.ant-dropdown-menu {
  width: 150px;
}
</style>